<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小罗后台管理系统</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 导入公共页面 -->
        {{ include "./common/header.html" }}

       <!-- 引入公共页面 -->
       {{include "./common/side-menu.html"}}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <h1 style="margin: 10px 60px;">添加文章</h1>
                <form class="layui-form" id="artForm" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-inline">
                            <input type="file" name="photo" id="photo" onchange="uploadFile(this)" style="display:none">
                            <a class="layui-btn" href="javascript:;" id="upload">上传文件</a>
                            <img src="" id="preview" alt="" style="width:80px">
                        </div>
                    </div>
                    
                    <div style="position: relative; padding: 10px 0;">
                        <div class="layui-form-item" style="position: absolute; top:0;left:0; z-index: 999999;margin: 18px 0;
                        top: -31px;">
                            <label class="layui-form-label">所属分类</label>
                            <div class="layui-input-inline">
                                <select id="cate_id" name="cate_id" >
                                    <option value="0">未分类</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    


                    <div class="layui-form-item">
                        <label class="layui-form-label">审核</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="0" title="待审核" checked="">
                            <input type="radio" name="status" value="1" title="审核通过">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-block">
                            <div id="content"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn"  id="submitForm">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</body>

<script src="/assets/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script>

    let editor;
    function initEditor(){
        // 初始化富文本编辑器
        const E = window.wangEditor
        editor = new E('#content')
        editor.config.uploadImgShowBase64 = true
        editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 5M
        editor.create()
    }

    // 初始化富文本编辑器
    initEditor();
    
    // 上传文件
    function uploadFile(fileEle){
        const file = fileEle.files[0];
        // 预览图片
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file)
        fileReader.onload = function(){
            const base64 = this.result
            console.log(base64)
            $("#preview").attr('src',base64)
        }

    }


    layui.use(['form', 'layedit', 'laydate'],function(){
        const form = layui.form;
        async function initCateData(){
            const {data} = await $.get('/cateData')
            console.log(data);
            let optionsHtml = '<option value="0">未分类</option>';
            data.forEach(item => {
                const {cate_id,cate_name} = item;
                optionsHtml += `<option value="${cate_id}">${cate_name}</option>`
            });
            $("#cate_id").html(optionsHtml)

            form.render('select');
        }

        initCateData();
        $("#upload").on('click',()=>{
            $("#photo")[0].click();
        })

    })
   

   $("#submitForm").on('click',async ()=>{
       const formData = new FormData( $("#artForm")[0] )
        const content = editor.txt.html() 
        formData.append('content',content)
       const {code,message} = await $.ajax({
           url:"/addArtData",
           type: 'post',
           data:formData,
           contentType:false,
           processData:false
       })
       layer.msg(message)
       if(code === 0){
        location.href = '/article'
       }
      
       
   })
</script>


</html>